﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap" async defer></script>

    <!-- jQuery reference. Used to make parsing the GeoRSS file easier. -->
    <script type="text/javascript" src="scripts/jquery.min.js"></script>

    <script type="text/javascript">
          var map, dataLayer, infobox;

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "Your_Bing_Maps_Key" });

              infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
              infobox.setMap(map);

              //Register and load the GeoRSS Module
              Microsoft.Maps.registerModule("GeoRSSModule", "scripts/GeoRSSModule.js");
              Microsoft.Maps.loadModule("GeoRSSModule");
          }

          function LoadGeoRSS(url) {
              map.entities.clear();
              infobox.setOptions({ visible: false });

              //Define default shape options
              var polylineOptions = {
                  strokeColor: new Microsoft.Maps.Color(156, 0, 0, 255)
              };

              var polygonOptions = {
                  fillColor: new Microsoft.Maps.Color(156, 0, 0, 255),
                  strokeColor: new Microsoft.Maps.Color(156, 0, 255, 0)
              };

              new GeoRSSModule().ImportGeoRSS(url, GeoRSSImportedCallback, { polylineOptions: polylineOptions, polygonOptions: polygonOptions });
          }

          function GeoRSSImportedCallback(items, bounds) {
              //Advance functionalities can be added here such as adding event handlers.
              for (var i = 0; i < items.getLength() ; i++) {
                  Microsoft.Maps.Events.addHandler(items.get(i), 'click', displayInfobox);
              }

              map.entities.push(items);
              map.setView({ bounds: bounds });
          }

          function displayInfobox(e) {
              if (e.target.Metadata) {
                  if (e.targetType == 'pushpin') {
                      infobox.setLocation(e.target.getLocation());
                  } else {
                      infobox.setLocation(e.location);
                  }

                  infobox.setOptions({ visible: true, title: e.target.Metadata.title, description: e.target.Metadata.description });
              }
          }
    </script>
</head>
<body>
    <div id='myMap' style="position:relative; width:600px; height:600px;"></div>
    <input type="button" value="Local file (Earthquakes)" onclick="LoadGeoRSS('Data/eqs7day-M2.5.xml')" />
    <input type="button" value="Local file (Test GeoRSS)" onclick="LoadGeoRSS('Data/TestGeoRSS.xml')" />
    <input type="button" value="Local file (Basic GeoRSS)" onclick="LoadGeoRSS('Data/BasicGeoRSS.xml')" />
    <input type="button" value="Local file (Atom GeoRSS)" onclick="LoadGeoRSS('Data/SampleAtomFeed.xml')" />
    <input type="button" value="External file (Atom GeoRSS)" onclick="LoadGeoRSS('GeoRSSProxy.ashx?url=http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.atom')" />
</body>
</html>